/*
 * 修改发型素材
 * @Author: ljb
 * @Date: 2018-03-27 17:53:27
 * @Last Modified by: ljb
 * @Last Modified time: 2018-06-15 15:11:40
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .ivu-form-item-content {
        img {
            width: 200px;
            margin-top: 5px;
        }
    }

</style>
<template>
	<Form
		ref="formValidate"
		:model="formValidate"
		:rules="ruleValidate"
		:label-width="80">

		<Form-item
			:label="$t('hair.gender')"
			prop="gender">
			<RadioGroup v-model="formValidate.gender">
				<Radio label="1">
					<span>{{ $t('hair.male') }}</span>
				</Radio>
				<Radio label="2">
					<span>{{ $t('hair.female') }}</span>
				</Radio>
				<Radio label="0">
					<span>{{ $t('hair.other') }}</span>
				</Radio>
			</RadioGroup>
		</Form-item>

		<Form-item
			:label="$t('hair.asset_title')"
			prop="asset_title">
			<i-input
				v-model="formValidate.asset_title"
				:placeholder="$t('hair.please_enter_asset_title')"
				type="text"/>
		</Form-item>

		<Form-item
			:label="$t('hair.sort')"
			prop="sort">
			<InputNumber
				:max="100000"
				:min="0"
				v-model="formValidate.sort"
				:placeholder="$t('hair.please_enter_sort')"/>
		</Form-item>

		<Form-item
			:label="$t('hair.dir')"
			prop="assets_dir">
			<Tooltip
				:content="$t('hair.dir_tip')"
				placement="top">
				<i-input
					v-model="formValidate.assets_dir"
					:placeholder="$t('hair.please_enter_dir')"
					type="text"
					readonly/>
			</Tooltip>
		</Form-item>

		<Form-item
			:label="$t('hair.thumb')"
			prop="hair_preview">
			<Upload
				:before-upload="file=>fileChange(file,'hair_preview','image_info')"
				:on-remove="file=>fileChange(file,'hair_preview','image_info')"
				:multiple="false"
				accept="image/jpg, image/jpeg, image/png"
				action="//fake_upload_url/">
				<Button
					type="ghost"
					icon="ios-cloud-upload-outline">{{ image_info.url ? this.$t('common.change_picture') : this.$t('common.upload_picture') }}</Button>
				<img
					v-if="image_info.url"
					:src="image_info.url"
					alt="">
				<div
					v-else
					slot="tip"
					class="license-tip">{{ $t('hair.image_format') }}</div>
			</Upload>
		</Form-item>

		<Form-item
			:label="$t('hair.assets_png')"
			prop="assets_png">
			<Upload
				:before-upload="file=>fileChange(file,'assets_png','png_info')"
				:on-remove="file=>fileChange(file,'assets_png','png_info')"
				:multiple="false"
				accept="image/jpg, image/jpeg, image/png"
				action="//fake_upload_url/">
				<Button
					type="ghost"
					icon="ios-cloud-upload-outline">
					{{ png_info.url ? this.$t('common.change_picture') : this.$t('common.upload_picture') }}
				</Button>
				<img
					v-if="png_info.url"
					:src="png_info.url"
					alt="">
				<div
					v-else
					slot="tip"
					class="license-tip">
					{{ $t('common.pic_tip') }}
				</div>
			</Upload>
		</Form-item>

		<Form-item
			:label="$t('hair.assets_bin')"
			prop="assets_bin">
			<Upload
				:before-upload="file=>fileChange(file,'assets_bin','bin_info')"
				:on-remove="file=>fileChange(file,'assets_bin','bin_info')"
				:multiple="false"
				action="//fake_upload_url/">
				<Button
					type="ghost"
					icon="ios-cloud-upload-outline">
					{{ bin_info.name ? this.$t('common.change_picture') : this.$t('common.upload_picture') }}
				</Button>
				<div
					v-if="bin_info.name"
					slot="tip"
					class="license-tip">{{ bin_info.name }}</div>
				<div
					v-else
					slot="tip"
					class="license-tip">
					{{ $t('hair.assets_bin_tip') }}
				</div>
			</Upload>
		</Form-item>

		<Form-item>
			<Button
				type="primary"
				@click="handleSubmit('formValidate')">
				{{ this.$t('common.submit') }}
			</Button>
		</Form-item>

	</Form>
</template>

<script>

import { validateUpdateImage } from 'src/validate'; // 引入校验文件

export default {
	name: 'HairEdit',
	props: {
		hairDetail: {
			type: Object,
			default() {
				return {};
			},
		},
	},
	data() {
		return {
			formValidate: {
				gender: '',

				asset_title: '',

				assets_dir: '',

				hair_preview: '',

				assets_bin: '',

				assets_png: '',

				sort: 1,
			}, // 更新素材时的表单

			ruleValidate: { // 验证规则
				gender: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('hair.gender') }),
						trigger: 'blur,change',
					},
				],
				asset_title: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('hair.asset_title') }),
						trigger: 'blur,change',
					},
				],
				assets_dir: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('hair.dir') }),
						trigger: 'blur,change',
					},
				],
				hair_preview: [
					{ validator: validateUpdateImage, trigger: 'blur,change' },
				],
				assets_png: [
					{ validator: validateUpdateImage, trigger: 'blur,change' },
				],
				sort: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('hair.sort') }),
						trigger: 'blur,change',
					},
				],
			},

			// 上传的缩略图信息
			image_info: {
				name: '',
				url: '',
			},

			// 上传的.png信息
			png_info: {
				name: '',
				url: '',
			},

			// 上传的.bin信息
			bin_info: {
				name: '',
				url: '',
			},

		};
	},
	watch: {
		hairDetail() {
			if (this.hairDetail) {
				this.formValidate.assets_dir = this.hairDetail.assets_dir;
				this.formValidate.asset_title = this.hairDetail.asset_title;
				this.formValidate.gender = String(this.hairDetail.gender);
				this.formValidate.hair_preview = this.hairDetail.hair_preview;
				this.formValidate.assets_bin = this.hairDetail.assets_bin;
				this.formValidate.assets_png = this.hairDetail.assets_png;
				this.formValidate.sort = this.hairDetail.sort;

				this.image_info.url = this.hairDetail.hair_preview;
				this.png_info.url = this.hairDetail.assets_png;
				this.bin_info.url = this.hairDetail.assets_bin;
			}
		},
	},
	methods: {

		/**
         * 获取上传的图片的链接地址
         * @param  {string} info {需要存储的对象名}
         * @param  {Object} file {文件对象}
         * @return {undefined}
         */
		getUploadImage(info, file) {
			const self = this;

			const reader = new FileReader();

			reader.readAsDataURL(file);

			reader.onload = function (event) {
				self[info].url = event.target.result;
			};
		},

		/**
         * file类型input改变
         * @param  {Object} file {选择的文件对象}
         * @return {Boolean} {false则会停止上传}
         */
		fileChange(file, param, info) {
			this.getUploadImage(info, file);

			this[info].name = file.name;

			this.formValidate[param] = file;

			return false;
		},

		/**
         * 重置部分信息
         * @return {undefined}
         */
		handleReset() {
			this.image_info.name = '';
			this.image_info.url = '';

			this.png_info.name = '';
			this.png_info.url = '';

			this.bin_info.name = '';
			this.bin_info.url = '';
		},

		/**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.updateProduct();
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 更新素材
         * @return {undefined}
         */
		updateProduct() {
			this.handleReset();

			this.$emit('update', this.hairDetail.id, this.formDataCreate());
		},

		/**
         * 手动拼接formdata数据
         * @return {Object}
         */
		formDataCreate() {
			const new_object = {

				_method: 'PUT',

				gender: this.formValidate.gender,

				sort: this.formValidate.sort,

			};

			if (this.formValidate.asset_title !== this.hairDetail.asset_title) {
				new_object.asset_title = this.formValidate.asset_title;
			}

			if (this.formValidate.hair_preview !== this.hairDetail.hair_preview) {
				new_object.hair_preview = this.formValidate.hair_preview;
			}

			if (this.formValidate.assets_bin !== this.hairDetail.assets_bin) {
				new_object.assets_bin = this.formValidate.assets_bin;
			}

			if (this.formValidate.assets_png !== this.hairDetail.assets_png) {
				new_object.assets_png = this.formValidate.assets_png;
			}

			const form_data = new FormData();

			Object.keys(new_object).forEach((key) => {
				form_data.append(key, new_object[key]);
			});

			return form_data;
		},

	},
};
</script>
